<!DOCTYPE html>
<html>
<head>
    <title>edit</title>
    <link rel="stylesheet" href="__STATIC__/js/element/css/element.css">
    <include file='public/head'></include>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .el-form-item__content{
            line-height: 0px !important;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div class="layui-tab box" lay-filter="demo-tab" id="app" v-cloak>
    <div class="layui-tab-nav" >
        <ul class="layui-tab-title">
            <li style="padding: 0;"><a href="javascript:history.go(-1)" style="padding:0 15px;">返回</a></li>
            <li style="padding: 0;" class="layui-this"><a style="padding:0 15px;" href="">编辑</a></li>
        </ul>
    </div>
    <div style="margin-top: 30px;">
        <el-form :model="form">
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-select v-model="form.category" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="{:cmf_plugin_url('encyclopedias://admin_index/upload')}"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth">
                <textarea id="editor_id" name="content" style="width: 100%;height: 500px;">
                    {$info.content}
                </textarea>
<!--                <script id="container" name="content" type="text/plain"></script>-->
            </el-form-item>



        </el-form>

        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="subEncy">确 定</el-button>
        </div>
    </div>
</div>
<!-- 配置文件 -->
<!--<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>-->
<!--<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>-->

<script type="text/javascript" src="__STATIC__/js/kindeditor/kindeditor-all.js"></script>
<script type="text/javascript" src="__STATIC__/js/kindeditor/lang/zh-CN.js"></script>

<include file='public/scripts'></include>
<script src="__STATIC__/js/vue.js"></script>
<script src="__STATIC__/js/element/js/element.js"></script>

<script type="text/javascript">
    var cid = {$id};

    // 关闭过滤模式，保留所有标签
    KindEditor.options.filterMode = false;
    KindEditor.ready(function(K) {
        window.editor = K.create('#editor_id',{
            urlType:'domain'
        });


        html = editor.html();

        // 同步数据后可以直接取得textarea的value
        editor.sync();
        html = document.getElementById('editor_id').value; // 原生API
        html = K('#editor_id').val(); // KindEditor Node API
        html = $('#editor_id').val(); // jQuery

        // 设置HTML内容
        // editor.html('HTML内容');
    });
    var app = new Vue({
        el: '#app',
        data: {
            formLabelWidth: '50px',
            imageUrl: '',
            options: [],
            form: {
                title: '',
                category: '',
                image: '',
            },
        },
        mounted:function () {
            this.getCategoryList();
            //获取详情
            this.getEncyclopediasInfo();
        },
        methods: {
            //获取详情
            getEncyclopediasInfo:function () {
                let that = this;
                let addUrl = "{:cmf_plugin_url('encyclopedias://admin_index/encyInfo')}";
                $.ajax({
                    url: addUrl,
                    type: 'post',
                    data: {
                        id:cid
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 200) {
                            that.form.title = res.data.title
                            that.form.category = res.data.category
                            that.form.image = res.data.image
                            that.imageUrl = res.data.full_image

                            $('#editor_id').val(res.data.content)
                        } else {
                            that.$message.error(res.message);
                        }
                    },
                })
            },
            //获取分类列表
            getCategoryList:function () {
                let that = this;
                let addUrl = "{:cmf_plugin_url('encyclopedias://admin_index/categoryAllList')}";
                $.ajax({
                    url: addUrl,
                    type: 'post',
                    data: {},
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 200) {
                            that.options = res.data
                        } else {
                            that.$message.error(res.message);
                        }
                    },
                })
            },
            handleAvatarSuccess:function (res, file) {
                console.log(res)
                if (res.code == 200) {
                    this.form.image = res.data;
                    this.$message({
                        message: res.message,
                        type: 'success'
                    });
                }
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload:function (file) {
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isLt2M;
            },
            subEncy:function (){
                editor.sync();
                let content = $('#editor_id').val();

                let that = this;
                let addUrl = "{:cmf_plugin_url('encyclopedias://admin_index/encyEdit')}";
                $.ajax({
                    url: addUrl,
                    type: 'post',
                    data: {
                        id:cid,
                        title:that.form.title,
                        category:that.form.category,
                        image:that.form.image,
                        content:content,
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 200) {
                            that.$message({
                                message: res.message,
                                type: 'success'
                            });
                            setTimeout(function (){
                                history.go(-1)
                            },1000)
                        } else {
                            that.$message.error(res.message);
                        }
                    },
                })
            }
        }
    })
</script>
</body>
</html>